<!--
 * @Description: table {{$t('Hopen.sortTable.56cjuhqqlc80')}}
 * @Date: 2020-12-09 17:54:49
 * @LastEditors: lother
 * @LastEditTime: 2021-01-08 14:38:11
 * @FilePath: \AccounOpening-WEB\src\views\openProcess\Hopen\sortTable.vue
-->
<template>
  <el-dialog
    :title="$t('Hopen.sortTable.56cjuhqqixc0')"
    :close-on-click-modal="false"
    width="600px"
    :visible.sync="dialogVisible"
  >
    <el-table
      :data="tableData"
      border
      ref="sortList"
      class="sortTable"
      row-key="id"
    >
      <el-table-column :label="$t('Hopen.sortTable.56cjuhqqlc80')" width="80">
        <template>
          <div class="select-line-icon option-drag">
            <i class="el-icon-s-operation" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="type" :label="$t('Hopen.sortTable.56cjuhqqlto0')" width="150">
        <template slot-scope="scope">
          {{ scope.row.type | release(pageTpyeList) }}
        </template>
      </el-table-column>
      <el-table-column
        :prop="'name_' + langSufx"
        :label="$t('Hopen.sortTable.56cjuhqqm7c0')"
        minWidth="170"
        show-overflow-tooltip
      ></el-table-column>
    </el-table>

    <span slot="footer" class="dialog-footer" v-permission="['openFlow@pageSort']">
      <el-button @click="handleClose">{{$t('Hopen.sortTable.56cjuhqqmk00')}}</el-button>
      <el-button type="primary" @click="submitSort">{{$t('Hopen.sortTable.56cjuhqqmx80')}}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import Sortable from "sortablejs";
import { cardMode, pageTpyeList } from "@/assets/js/common";
import { postSort } from "@/api/openProcess/Hopen";

export default {
  components: {
    Sortable,
  },
  computed: {
    langSufx() {
      return this.$store.state.settings.langTail;
    },
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      cardMode,
      pageTpyeList,
      dialogVisible: false,
      tableData: [],
    };
  },
  mounted() {},
  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.tableData = [];
    },
    init(type) {
      this.dialogVisible = true;
      var _this = this;
      _this.$nextTick(() => {
        _this.rowDrop();
      });
      this.tableData = Object.assign([], this.tableData, this.list);
    },
    rowDrop() {
      const table = document.querySelector(".sortTable  tbody");
      const self = this;
      Sortable.create(table, {
        onEnd({ newIndex, oldIndex }) {
          console.log(self.tableData);
          const targetRow = self.tableData.splice(oldIndex, 1)[0];
          self.tableData.splice(newIndex, 0, targetRow);
        },
      });
    },
    submitSort() {
      var title =
        this.$t('Hopen.sortTable.56cjuhqqndw0');
      this.$confirm(title, this.$t('Hopen.sortTable.56cjuhqqo0o0'), {
        type: "warning",
      })
        .then((_) => {
          var ids = this.tableData.map((item) => {
            return item.id;
          });
          // this.handleClose()
          this.postSortView({ sort: ids.toString() });
        })
        .catch((_) => {});
    },
    postSortView(data) {
      postSort(data).then((res) => {
        if (res.code == 10000) {
          this.handleClose();
          this.$parent.getList();
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
>>> .sortTable tbody tr {
  cursor: all-scroll;
}
</style>